<template>
    <div class="wrapper" ref="wrapper">
        <div class="contentBox">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'

    export default {
        name: "Scroll",
        props: {
            data: {
                type: Array,
                default: () => {
                    return [];
                },
            },
        },
        data() {
            return {
                scroll: null,
            }
        },
        watch: {
            // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
            data() {
            setTimeout(() => {
                this.refresh();
                }, 20);
            },
        },
        mounted() {
            setTimeout(this.__initScroll, 20);
             // 保证在DOM渲染完毕后初始化better-scroll
            this.$nextTick(()=>{
                this.initScroll();
            })
            setTimeout(() => {
            
            }, 20);
        },
        methods: {
            initScroll() {
                if (!this.$refs.wrapper) {
                    return;
                }
                // better-scroll的初始化
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: 3,
                    click: true,
                    pullup: true,
                    mouseWheel: true, //鼠标滚轮滚动
                    disableMouse: false,// 启用鼠标拖动
                    disableTouch: false,// 启用手指触摸
                    pullUpLoad: true,
                    hasTouch : true
                });
                this.scroll.on("pullingUp", () => {
                    if(!this.pulllingUpOver){
                        this.$emit("pullingUp");
                    }
                })
            },
            refresh() {
                // 代理better-scroll的refresh方法
                this.scroll && this.scroll.refresh();
            },
            finishPullUp() {
                this.scroll.finishPullUp();
            }
        }
    }
</script>

<style lang="less" scoped>
</style>